<template>
    <div style="width:92%; margin-left: 4%; margin-top: 3%; background: #ffff;border-radius: 5%;">
        <div class="flex-content">
            <nut-cell-group>
                <nut-cell :center="true" :desc="state.address" is-link @click="chooseLocation()">
                    <template v-slot:icon>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/06/23/165808.png">
                        </image>
                    </template>
                    <template v-slot:link>
                        <image style="width:20px;height: 20px;"
                            src="https://pic.imgdb.cn/item/64819f271ddac507cccac341.png">
                        </image>
                    </template>
                </nut-cell>
                <nut-cell :center="true" title="友伴" :desc="state.userDetailsInfo.user_Nickname" is-link>
                    <template v-slot:icon>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/06/23/165804.png">
                        </image>
                    </template>
                    <template v-slot:link>
                        <image style="width:30px;height: 30px;border-radius: 50%;overflow:hidden;margin-left:5%;"
                            :src="state.userBaseInfo.imageUrl">
                        </image>
                    </template>
                </nut-cell>
                <nut-cell :center="true" title="出行方式" desc="滴滴出行">
                    <template v-slot:icon>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/06/23/161615.png">
                        </image>
                    </template>
                    <!-- <template v-slot:link>
                        <image style="width:20px;height: 20px;"
                            src="https://pic.imgdb.cn/item/64819f271ddac507cccac341.png">
                        </image>
                    </template> -->
                </nut-cell>
                <nut-cell :center="true" :desc="state.distance1">
                    <template v-slot:icon>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/06/23/165808.png">
                        </image>
                    </template>
                    <template v-slot:link>
                        <image style="width:20px;height: 20px;"
                            src="https://pic.imgdb.cn/item/64819f271ddac507cccac341.png">
                        </image>
                    </template>
                </nut-cell>
                <div class="content">
                    <span style="color: #999999">全程共</span>
                    <span style="color:lightgreen">{{ state.distance1 }}km</span>
                    <span style="color:#999999">,出租出行收取来回车费，</span>
                    <span style="color:lightgreen">起步10.00元</span>
                    <span style="color: #999999">，超出3公里，按</span>
                    <span style="color:lightgreen">每公里3.00元</span>
                    <span style="color: #999999">计算车费</span>
                </div>
                <nut-cell :center="true" title="服务时间" desc="到达" is-link @click="state.showSelectTime = true">
                    <template v-slot:icon>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/06/23/165416.png">
                        </image>
                    </template>
                    <template v-slot:link>
                        <image style="width:20px;height: 20px;"
                            src="https://pic.imgdb.cn/item/64819f271ddac507cccac341.png">
                        </image>
                    </template>
                </nut-cell>
            </nut-cell-group>
            <nut-popup v-model:visible="state.showSelectTime" position="bottom" :style="{ height: 'auto' }">
                <!-- <div style="font-size: 20px;text-align: center;padding: 5%;">请选择预约时间</div>
                <div style="width:96%;margin-left: 2%;">
                    <nut-grid :border="false" :column-num="7">
                        <nut-grid-item v-for="(item, index) in state.showDays" :key="index">
                            <div style="font-size: xx-small">{{ item.weekday }}</div>
                            <div style="font-size: xx-small">{{ item.date }}</div>
                        </nut-grid-item>
                    </nut-grid>
                    <nut-tabs v-model="value">
                        <template #titles>
                            <div v-for="item in state.showDays" :key="item.date" class="custom-tab-item"
                                @click="value = item.date">
                                <div class="custom-title" :class="{ active: value === item.date }">
                                    <div>
                                        <div style="font-size: xx-small">{{ item.weekday }}</div>
                                        <div style="font-size: xx-small">{{ item.date }}</div>
                                    </div>
                                </div>
                            </div>
                        </template>
                        <nut-tab-pane v-for="item in list" :key="item.paneKey" :pane-key="item.paneKey">

                        </nut-tab-pane>
                    </nut-tabs>
                </div> -->
                <nut-date-picker v-model="time" type="datetime" :min-date="min" :max-date="max"
                    :three-dimensional="false" :formatter="formatter" @confirm="confirm"></nut-date-picker>
            </nut-popup>
        </div>
    </div>
    <div style="width:92%; margin-left: 4%; margin-top: 3%; background: #ffff;border-radius: 5%;">
        <!-- <div class="flex-content"> -->
        <div
            style="font-weight: bold;font-size: 14px;margin-left:4%;margin-right:4%;padding-top: 3%;border-bottom: 0.5px solid #e6e6e6;">
            订单明细</div>
        <div style="margin:5%">
            <nut-row>
                <nut-col :span="7">
                    <image style="width:80px;height: 80px;border-radius: 5%;overflow: hidden;" :src="state.imgUrl">
                    </image>
                </nut-col>
                <nut-col :span="17">
                    <div style="font-size:14px;font-weight:bold;">{{ state.projectList.project_Name }}</div>
                    <div style="font-size:14px;color:#999999;">服务时长：<span style="color:black">{{ state.preSerTime
                            }}分钟</span></div>
                    <div style="display:inline;">
                        <div style="font-size:16px;margin-top:5%;color:red;font-weight:bold;float:left">¥&nbsp;{{
                    state.projectList.mini_Amount }}</div>
                        <div style="float:right;margin-top: 6%"><nut-input-number v-model="serviceNum" /></div>
                    </div>
                </nut-col>
            </nut-row>
            <nut-row>
                <nut-col :span="20"><span style="font-size:14px;margin-left:auto;">项目金额</span></nut-col>
                <nut-col :span="4"><span
                        style="font-size:14px;color:red;font-weight:bold;float:right;">¥&nbsp;66</span></nut-col>
            </nut-row>
            <nut-row>
                <nut-col :span="20"><span style="font-size:14px;margin-left:auto;">出行费用</span></nut-col>
                <nut-col :span="4"><span style="font-size:14px;color:red;font-weight:bold;float:right;">¥&nbsp;{{
                    state.travelMoney
                }}</span></nut-col>
            </nut-row>
            <div
                style="width:98%;font-size: 12px;margin-top:2%; margin-bottom: 2%;background:#e6e6e6;padding:2%;border-radius: 5px;">
                <span style="color: #999999">若预约凌晨时间，友伴上门难度增大，出行费用将上调</span>
            </div>
            <nut-row>
                <nut-col :span="20"><span style="font-size:16px;font-weight:bold;margin-left:auto;">总计</span></nut-col>
                <nut-col :span="4"><span
                        style="font-size:16px;color:red;font-weight:bold;float:right;">¥&nbsp;86</span></nut-col>
            </nut-row>
        </div>
    </div>
    <div style="width:92%; margin-left: 4%; margin-top: 3%; background: #ffff;border-radius: 5%;">
        <!-- <div class="flex-content"> -->
        <div style="font-weight: bold;font-size: 14px;margin-left:4%;margin-right:4%;padding-top: 3%;" class="flex-a">
            <image style="width:20px;height: 20px;vertical-align: middle"
                src="https://cxj.szzkba.cn/upload/i/2024/06/23/185907.png">
            </image>
            <span style="vertical-align: middle">&nbsp;专业正规</span>
        </div>
        <div style="font-size: 12px;margin-left:4%;margin-right:4%;padding-top: 3%;color:#999999">
            提供正规、专业的友伴服务，平台友伴均具备专业素质，可放心预约点单</div>
        <div style="font-weight: bold;font-size: 14px;margin-left:4%;margin-right:4%;padding-top: 3%;" class="flex-a">
            <image style="width:20px;height: 20px;vertical-align: middle"
                src="https://cxj.szzkba.cn/upload/i/2024/06/23/184956_2.png">
            </image>
            <span style="vertical-align: middle">&nbsp;安心服务</span>
        </div>
        <div style="font-size: 12px;margin-left:4%;margin-right:4%;padding-top: 3%;color:#999999">
            友伴经受专业培训，禁止小费行为</div>
        <div style="font-weight: bold;font-size: 14px;margin-left:4%;margin-right:4%;padding-top: 3%;" class="flex-a">
            <image style="width:20px;height: 20px;vertical-align: middle"
                src="https://cxj.szzkba.cn/upload/i/2024/06/23/184956.png">
            </image>
            <span style="vertical-align: middle">&nbsp;号码保护</span>
        </div>
        <div style="font-size: 12px;margin-left:4%;margin-right:4%;padding-top: 3%;color:#999999">
            为了保护您的隐私安全，已对友伴隐藏您的真实手机号,为了保障服务质量，开启号码保护的订单通话可能会被录音</div>

    </div>
    <div style="background: #ffff;border-radius: 5%;margin-top:5%;">
        <div style="width:92%;padding:4%">
            <nut-button block color="#2B35FA" @click="submit">提交订单</nut-button>
        </div>
    </div>
    <!-- <ProjDetails /> -->
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, watchEffect } from 'vue';
import { getUserDetailsByID, getPageSettingList, createOrder } from '../../../../api/index'
import Taro from '@tarojs/taro'
const value = ref('c1')
const serviceNum = ref(1)
const selectDate = new Date()
const min = new Date(2024, 1, 1, 0, 0)
const max = new Date(2027, 12, 31, 23, 59)
const time = ref('')
const list = ref([
    {
        title: '提供的项目',
        // icon: 'https://cxj.szzkba.cn/upload/i/2024/06/04/180234.png',
        paneKey: 'c1'
    },
    {
        title: 'Ta的动态',
        // icon: 'https://cxj.szzkba.cn/upload/i/2024/06/04/180443.png',
        paneKey: 'c2'
    },
    {
        title: '客户评价',
        // icon: 'https://cxj.szzkba.cn/upload/i/2024/06/04/180153.png',
        paneKey: 'c3'
    }
])
const state = reactive({
    distance1: '1111111111111',
    travelMoney: 0,
    showPreview: false,
    imgData: [
        {
            src: 'https://cxj.szzkba.cn/upload/i/2024/06/05/163233.jpg'
        },
        {
            src: 'https://cxj.szzkba.cn/upload/i/2024/06/05/163233.jpeg'
        },
        {
            src: 'https://cxj.szzkba.cn/upload/i/2024/06/04/182133.jpeg'
        },
    ],
    imgUrl:
        'https://cxj.szzkba.cn/upload/i/2024/06/04/182133.jpeg',
    title: '礼仪模特',
    userDetailsInfo: [],
    userBaseInfo: [],
    userServiceInfo: [],
    preSerTime: 120,
    projectList: [],
    address: '请选择地址',
    showSelectTime: false,
    showDays: [] as any,
    user: {},
})
const confirm = ({ selectedValue }) => {
    console.log(selectedValue)
    time.value = selectedValue[0] + '-' + selectedValue[1] + '-' + selectedValue[2] + ' ' + selectedValue[3] + ':' + selectedValue[4]
    console.log(time.value)
    state.showSelectTime = false
}
const formatter = (type, option) => {
    switch (type) {
        case 'year':
            option.text += '年'
            break
        case 'month':
            option.text += '月'
            break
        case 'day':
            option.text += '日'
            break
        case 'hour':
            option.text += '时'
            break
        case 'minute':
            option.text += '分'
            break
        default:
            option.text += ''
    }
    return option
}
onMounted(() => {
    Taro.getStorage({
        key: 'user',
        success: function (res) {
            state.user = res.data ? res.data : {}
        }
    })
    Taro.setNavigationBarTitle({
        title: '提交订单'
    })
})
const submit = () => {
    let params = {
        user_ID: state.user.uuid,
        service_Name: state.projectList.project_Name,
        service_Time: time.value,
        service_Addr: '江西省上饶市万达广场',
        service_Amount: 66,
        taxi_Amount: 20,
    }
    createOrder(params).then(res => {
        if (res.code == 0) {
            Taro.showToast({
                title: '提交成功',
                icon: 'success',
                duration: 2000
            })
            setTimeout(() => {
                jumpTo('/pages/index/index')
            }, 500)
        }
    })
}
const jumpTo = (path) => {
    Taro.navigateTo({ url: path })
}
const visible = ref(false)
const onCancel = () => {
    console.log('event cancel')
}
const onOk = () => {
    jumpTo('/packageA/pages/order/orderDetails')
    console.log('event ok')
}
const preClick = () => {
    visible.value = true
}
const chooseLocation = () => {
    Taro.chooseLocation({
        success: function (res) {
            console.log(res)
            state.address = res.address

            const latitude = res.latitude
            const longitude = res.longitude
            const earthRadius = 6371000;

            // 转换为弧度
            const lat1Rad = latitude * (Math.PI / 180);
            const lat2Rad = Number(28.42995) * (Math.PI / 180);
            const lon1Rad = longitude * (Math.PI / 180);
            const lon2Rad = Number(117.96469) * (Math.PI / 180);

            // Haversine公式
            const diffLat = lat2Rad - lat1Rad;
            const diffLon = lon2Rad - lon1Rad;
            const a = Math.sin(diffLat / 2) * Math.sin(diffLat / 2) +
                Math.cos(lat1Rad) * Math.cos(lat2Rad) *
                Math.sin(diffLon / 2) * Math.sin(diffLon / 2);
            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
            const distance = earthRadius * c;
            state.distance1 = distance + ''
            console.log(distance)
            console.log(state.distance)
            console.log(Number((Number(distance) / 1000).toFixed(3)))
            // if (state.distance <= 3) {
            //     state.travelMoney = 10
            // } else {
            //     state.travelMoney = 10 + (Math.ceil(state.distance) - 3) * 3
            // }
            console.log(state.travelMoney)
        },
        fail: function (res) {
            console.log(res, '获取地址失败');
        },
    })
}
watchEffect(() => {
    console.log(state.distance)
})
const getUserDetails = () => {
    const UserID = Taro.getCurrentInstance().router.params.userID
    const ProjectID = Taro.getCurrentInstance().router.params.projectID
    console.log("UserID : " + UserID)
    console.log("ProjectID : " + ProjectID)
    getUserDetailsByID(UserID).then(res => {
        if (res.code == 0) {
            res.data.reuserDetails.user_Enterts = res.data.reuserDetails.user_Enterts.split(",")
            res.data.reuserDetails.user_Services = res.data.reuserDetails.user_Services.split(",")
            res.data.reuserDetails.user_Leisures = res.data.reuserDetails.user_Leisures.split(",")
            res.data.reuserDetails.user_Balls = res.data.reuserDetails.user_Balls.split(",")
            state.userDetailsInfo = res.data.reuserDetails
            state.userBaseInfo = res.data.reuserDetails.Users
            state.userServiceInfo = res.data.reuserDetails.UserOnService
            console.log(state.userBaseInfo)
            console.log(state.userDetailsInfo)
        }
    })
    getPageSettingList().then(resd => {
        if (resd.code == 0) {
            let proList = resd.data.list
            console.log(proList)
            proList = proList.filter((item, index) => item.ID == ProjectID)
            state.imgUrl = proList[0].remark
            state.projectName = proList[0].project_Name
            state.miniAmount = proList[0].mini_Amount
            state.projectList = proList[0]
            // console.log(state.projectList)
        }
    })
};
const futureDays = () => {
    for (let i = 0; i < 7; i++) {
        let date = new Date();
        date.setDate(new Date().getDate() + i);
        let weekday = new Date(date).toLocaleDateString(undefined, { weekday: 'short' });
        // days.push({
        //   date: date.toLocaleDateString(),
        //   weekday: weekday
        // });
        state.showDays.push({
            date: date.toLocaleDateString('zh-cn', { month: 'long', day: 'numeric' }),
            weekday: weekday
        })
    }
}
getUserDetails()
futureDays()
</script>
<style lang="scss">
.avatar {
    vertical-align: middle
}

.content {
    width: 86%;
    font-size: 12px;
    margin-left: 7%;
    margin-top: 2%;
    margin-bottom: 2%;
    background: #e6e6e6;
    padding: 2%;
    border-radius: 5px;

    span {
        display: inline-block;
        font-size: 26rpx;
    }
}

.avatarButton {
    display: flex;
    align-items: center;
    margin-left: 20%;
    // margin-top: 5%;
}

.avatarImage {
    margin-left: 5%;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 50%;
}

.nut-video-player {
    margin-left: 5%;
    width: 620px;
}

.imageContainer {
    display: flex;
    /* 启用Flexbox布局 */
    flex-wrap: wrap;
    /* 允许元素在必要时换行 */
}

.imageBox {
    flex: 1;
    /* 每个.box平均分配空间 */
    // border: 1px solid #000;
    /* 边框，以便于观察 */
    // padding: 10px;
    /* 内边距 */
    box-sizing: border-box;
    /* 防止内边距和边框增加总尺寸 */
    margin-left: 5%;
    /* 外边距 */

    flex-basis: 100%;
    /* 每个div默认占满一行 */
}

@media screen and (min-width: 620px) {
    .imageBox {
        flex-basis: calc(100% / 3);
        /* 屏幕宽度大于600px时，每个div平分容器宽度的三分之一 */
    }
}

.custom-tab-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.8%;
    // margin-left: 4%;
}

.custom-title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    color: rgb(66, 66, 66);
    cursor: pointer;
    // margin-top: 40%;
}

.custom-title.active {
    color: black;
    font-weight: bold;
    margin-bottom: 10%;
    background: rgb(255, 255, 255);
}

.nut-tabs__titles .nut-tabs__list {
    background: transparent;
}

.card-tag-list {
    margin: 15% 0 1px;
    height: 30px;
    overflow: hidden;
}

.card-tag-list>.tag {
    float: left;
    padding: 0 10px;
    border-radius: 1px;
    font-size: 24px;
    height: 30px;
    line-height: 30px;
    color: #999;
    background-color: #f2f2f7;
    margin-right: 5px;
}

.card-foot {
    margin-top: 5%;
}

.card-title {
    font-weight: bold;
}

.nut-card .nut-card__right .nut-card__right__title {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-all;
    line-height: 1.5;
    font-size: 0.8rem;
    font-weight: bold;
}
</style>